<template>
  <div class="home" @click="search_box_show_fn($event)">
    <!-- 头部导航 -->
    <div class="home_title_nav">
      <!-- 导航栏左边  logo 标题  搜索位置 -->
      <div class="nav_left">
        <!-- logo 标题 -->
        <div class="nav_left_sm_box">
          <div class="logo"><img src="../assets/images/logo.png" alt="" /></div>
          <div class="name">网易音乐</div>
        </div>
        <!--  左右按钮  搜索位置  听歌识曲  -->
        <div class="nav_left_ipt">
          <!-- 左右按钮 -->
          <div class="nav_left_icon">
            <!-- 左按钮 -->
            <div class="icon_left" @click="go(-1)">
              <div class="el-icon-arrow-left"></div>
            </div>
            <!-- 右按钮 -->
            <div class="icon_right" @click="go(1)">
              <div class="el-icon-arrow-right"></div>
            </div>
          </div>
          <!-- ipt -->
          <div class="search">
            <input
              v-model="search_value"
              class="inp"
              value=""
              type="text"
              placeholder="搜索"
              @blur="search_blur_fn()"
              @focus="search_focus_fn()"
              @input="search_input_change_fn()"
              @keydown.enter="search_enter_fn()"
            />
            <!-- 搜索弹窗外部盒子 -->
            <div class="tc" v-show="search_box">
              <!-- 搜索弹窗内部盒子 -->
              <div class="tc_box" v-if="search_box_now">
                <!-- 搜索历史部分 -->
                <div v-show="!($store.state.search_history_data.length === 0)">
                  <!-- 头部的删除历史 和图标和  查看全部 的盒子 -->
                  <div class="tc_title_box">
                    <!-- 删除历史和删除历史的图标 -->
                    <div class="history_delete">
                      <span class="history">搜索历史</span>
                      <span
                        class="el-icon-delete"
                        @click="delete_search_histroy_fn()"
                      ></span>
                    </div>
                    <!-- 查看全部 -->
                    <div class="look_all" @click="look_all_fn">查看全部</div>
                  </div>
                  <!-- 收缩]搜索历史内容 -->
                  <div
                    class="search_history"
                    :style="look_all ? '' : 'height:70px'"
                  >
                    <div
                      class="search_history_item"
                      v-for="(item, index) in $store.state.search_history_data"
                      :key="index"
                      @click="search_enter_fn(item)"
                    >
                      <span>{{ item }}</span
                      ><span
                        class="search_history_delete"
                        @click.stop="delete_search_histroy_fn(index)"
                        >X</span
                      >
                    </div>
                  </div>
                </div>
                <!-- 热搜榜 -->
                <div class="hot_search_top_box">
                  <div class="hot_search_top">热搜榜</div>
                  <div class="hot_search_top_content">
                    <div
                      class="hot_search_top_item"
                      v-for="(item, index) in foucs_get_data"
                      :key="index"
                      @click="search_enter_fn(item.searchWord)"
                    >
                      <div
                        class="index"
                        :class="index < 3 ? 'index_top_three' : ''"
                      >
                        {{ index + 1 }}
                      </div>
                      <div class="name_count_desc">
                        <div class="name_count">
                          <span class="name">{{ item.searchWord }}</span>
                          <div
                            v-if="item.iconUrl"
                            :class="
                              item.iconType === 5
                                ? 'img_top_icon'
                                : 'img_hot_icon'
                            "
                          >
                            <img :src="item.iconUrl" alt="" />
                          </div>
                          <span class="count">{{ item.score }}</span>
                        </div>
                        <div class="desc" v-if="item.content">
                          {{ item.content }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 正在搜索时的内部盒子 -->
              <div class="tc_box2" v-if="!search_box_now">
                <div
                  class="tc_box2_title"
                  @click="search_enter_fn()"
                  v-html="
                    inp_change_search_data.title
                      ? inp_change_search_data.title
                      : ''
                  "
                ></div>

                <!-- 歌曲位置 -->
                <div v-if="inp_change_search_data.songs">
                  <!-- 单曲位置 -->
                  <div class="song_title">
                    <div class="img">
                      <img src="../assets/images/音乐.png" alt="" />
                    </div>
                    <div class="文字">单曲</div>
                  </div>
                  <!-- 单曲的每一项 -->
                  <div
                    v-for="(item, index) in inp_change_search_data.songs"
                    :key="index"
                    class="song_item"
                    @click="play_music(item)"
                  >
                    <span v-html="item.name1"></span>
                    <span class="alias" v-if="item.alias.length >= 1">
                      ({{ item.alias[0] }})
                    </span>
                    <span v-html="` - ${item.artists[0].name1}`"></span>
                  </div>
                </div>

                <!-- 歌手位置 -->
                <div v-if="inp_change_search_data.artists">
                  <!-- 歌手的位置 -->
                  <div class="singer_title">
                    <div class="img">
                      <img src="../assets/images/歌手.png" alt="" />
                    </div>
                    <div class="文字">歌手</div>
                  </div>
                  <!-- 歌手的每一项 -->
                  <div
                    class="singer_item"
                    v-for="(item, index) in inp_change_search_data.artists"
                    :key="index"
                    @click="gosingerDetails(item)"
                    v-html="item.name1"
                  ></div>
                </div>

                <!-- 专辑位置 -->
                <div v-if="inp_change_search_data.albums">
                  <!-- 专辑的位置 -->
                  <div class="zj_title">
                    <div class="img">
                      <img src="../assets/images/专辑.png" alt="" />
                    </div>
                    <div class="文字">专辑</div>
                  </div>
                  <!-- 专辑的每一项 -->
                  <div
                    class="zj_itme"
                    v-for="(item, index) in inp_change_search_data.albums"
                    :key="index"
                    @click="go_zj_details(item)"
                  >
                    <span class="song_name" v-html="item.name1"></span>
                    <span
                      class="singer_name"
                      v-html="` - ${item.artist.name1}`"
                    ></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 听歌识曲 -->
          <div class="listen_to_music">
            <img src="../assets/images/listen_to_music.png" alt="" />
          </div>
        </div>
        <!-- 搜索弹出 -->
      </div>
      <!-- 导航右边 登录 开通vip 换皮肤等 -->
      <div class="nav_right"></div>
    </div>
    <!-- 中间内容区 -->
    <div class="center_content">
      <!-- 左侧边导航 -->
      <div class="center_left">
        <!-- 发现音乐 视频 朋友 直播 -->
        <div class="nav">
          <div
            class="left_nav"
            :class="nav_active === index ? 'active' : ''"
            v-for="(item, index) in nav"
            :key="index"
            @click="nav_active_all(item.type, index)"
          >
            {{ item.title }}
          </div>
        </div>
        <!-- 我的音乐 -->
        <div class="my_music">
          <div class="left_nav_title">我的音乐</div>
          <!-- 我的音乐的每一项导航 -->
          <div
            class="left_nav"
            :class="my_music_nav_active === my_music_navIndex ? 'active' : ''"
            v-for="(my_music_navItem, my_music_navIndex) in my_music_nav"
            :key="my_music_navIndex"
            @click="nav_active_all(my_music_navItem.type, my_music_navIndex)"
          >
            {{ my_music_navItem.title }}
          </div>
        </div>
        <!-- 创建歌单 -->
        <div class="my_create">
          <div class="left_nav_create">
            <div class="left_nav_title create_show" @click="show_create">
              <div>创建的歌单</div>
            </div>
            <div class="add_ipt">+</div>
          </div>
          <div
            class="left_nav"
            :class="create_my_music_ipt_active === create_index ? 'active' : ''"
            v-if="show"
            v-for="(create_item, create_index) in create_my_music_ipt"
            :key="create_index"
            @click="nav_active_all(create_item.type, create_index)"
          >
            {{ create_item.title }}
          </div>
        </div>
      </div>
      <!-- 右边内容区域 -->
      <div class="center_right">
        <transition name=slide-right>
          <router-view></router-view>
        </transition>
        <keep-alive></keep-alive>
      </div>
    </div>
    <!-- 音乐播放器位置 -->
    <!-- $store.getters.play_show -->
    <div class="player" v-if="$store.getters.play_show">
      <!-- 音乐图片 音乐名称 收藏 歌唱者 -->
      <div class="music_info">
        <!-- 音乐图片位置 -->
        <div class="img" @click="go_friends()">
          <img :src="this.$store.state.musis_info.picUrl" alt="" />
          <div class="el-icon-arrow-up icon"></div>
        </div>
        <!-- 音乐名称 收藏   歌唱者-->
        <div class="name_collection_author">
          <!-- 音乐名称  收藏 -->
          <div class="name_collection">
            <!-- 音乐名称 -->
            <div class="name">
              <span>{{ this.$store.state.musis_info.name }}</span
              ><span class="alias">{{
                this.$store.state.musis_info.song.alias[0]
              }}</span>
            </div>
            <!-- 收藏 -->
            <div class="collection">
              <img src="../assets/images/love.png" alt="" />
            </div>
          </div>
          <!-- 歌唱者信息 -->
          <div class="author">
            {{ this.$store.state.musis_info.song.artists[0].name }}
          </div>
          <!-- {{music_info.song.artists[0].name}} -->
        </div>
      </div>

      <!-- 音乐播放器 -->
      <div class="center_player">
        <!-- 播放器按钮位置 -->
        <div class="btn">
          <!-- 上一首按钮 -->
          <div class="left_btn" @click="last_music()"></div>
          <!-- 中间按钮 -->

          <div
            :class="
              this.$store.state.paly_icon
                ? 'el-icon-video-pause'
                : 'el-icon-video-play'
            "
            class="center_btn"
            @click="pause_or_play()"
          ></div>
          <!-- 下一首按钮 -->
          <div class="right_btn" @click="next_music()"></div>
        </div>
        <!-- 播放器进度条位置 -->
        <div class="progres_time">
          <div>{{ $store.state.current_time }}</div>
          <div class="progres">
            <el-slider
              @change="change_player_lenth($store.state.player_lenth)"
              v-model="$store.state.player_lenth"
              :show-tooltip="false"
              :show-input-controls="false"
            ></el-slider>
          </div>
          <div>{{ $store.state.music_total_time }}</div>
        </div>
      </div>

      <!-- 音量控制 -->
      <div class="sound_box">
        <div class="sound">
          <img :src="volumeImg" alt="" />
        </div>
        <div class="block">
          <el-slider
            @input="set_volume($store.state.set_volume)"
            v-model="$store.state.set_volume"
            :show-tooltip="false"
            :show-input-controls="false"
          ></el-slider>
        </div>
      </div>

      <!-- 播放列表 -->
      <div class="play_list">
        <div class="play_list_img" @click="show_play_list">
          <img src="../assets/images/music_list.png" alt="" />
        </div>
        <div class="lists" v-if="show_play_list_boo">
          <!-- 播放列表的标题 -->
          <div class="play_history">历史播放</div>
          <!-- 播放列表的总数量还有清空按钮 -->
          <div class="title">
            <div class="list_count">
              总{{ $store.state.play_list.length }}首
            </div>
            <div class="delete_box" @click="delete_play_list()">
              <div class="delete_img">
                <img src="../assets/images/delete.png" alt="" />
              </div>
              <div class="delete">清空</div>
            </div>
          </div>
          <div
            class="list"
            :class="item.id === $store.state.musis_info.id ? 'active' : ''"
            v-for="(item, index) in $store.state.play_list"
            :key="index"
            @click="get_music_id(item)"
          >
            <div class="music_name">
              <span>{{ item.name }}</span>
              <span class="alias">{{ item.song.alias[0] }}</span>
            </div>
            <div class="music_man_name">{{ item.song.artists[0].name }}</div>
            <div class="music_time">{{ item.playTime }}</div>
            <div class="music_delete" @click.stop="delete_music(index)">
              <img src="../assets/images/delete.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 音乐播放器位置  当真正的播放器隐藏时显示 -->
    <div v-else class="pleyer_show"></div>
  </div>
</template>

<script>
import mute from "../assets/images/mute.png";
import volume from "../assets/images/volume.png";

// 导入格式化时间的方法
import { hsm, ymd } from "../assets/js/init_time.js";
export default {
  name: "Home",
  data() {
    return {
      // 用于侧边导航 的 发现音乐  视频  朋友 直播
      nav: [
        { title: "发现音乐", type: "1" },
        { title: "视频", type: "1" },
        { title: "朋友", type: "1" },
      ],
      //用于我的音乐
      my_music_nav: [
        { title: "本地音乐", type: "2" },
        { title: "下载管理", type: "2" },
      ],
      // 用于创建音乐
      create_my_music_ipt: [{ title: "我喜欢的音乐", type: "3" }],
      // 控制创建歌单的二级导航
      show: false,
      // 控制nav部分高亮
      nav_active: 0,
      // 控制我的音乐部分高亮
      my_music_nav_active: -1,
      // 控制创建音乐高亮
      create_my_music_ipt_active: -1,
      // 切换静音图标
      volumeImg: volume,
      // 控制显示播放列表
      show_play_list_boo: false,

      // 搜索的关键字
      search_value: "",

      // 定时器
      timer: null,

      // 是否显示搜索弹窗
      search_box: false,

      // 是否显示正在搜索的弹窗
      search_box_now: false,

      // 用于获取光时不要频繁获取数据 节流
      search_timer: null,
      search_boo: true,

      // 热搜榜的数据
      foucs_get_data: [],

      // 点击查看全部搜索历史
      look_all: false,
      // 搜索历史的数据
      search_history_data: [],

      // input事件 触发时得到的数据
      inp_change_search_data: [],

      transitionName: "",
    };
  },
  created() {
    // 将audio节点存到vuex
    this.$store.commit("audio", this.$parent.$refs.audio);
    // 进入页面  把歌词路由的节点删除 不然没进入歌词界面播放音乐会报错
  },
  watch: {
    // $route(to, from) {
    //   if (from.meta.index == 0 && to.meta.index > from.meta.index) {
    //     //设置动画名称
    //     this.transitionName = "slide-left";
    //     return;
    //   }
    //   if (to.meta.index == 0 && to.meta.index < from.meta.index) {
    //     this.transitionName = "slide-right";
    //   }
    //   if (to.meta.index > 1 && to.meta.index > from.meta.index) {
    //     //设置动画名称
    //     this.transitionName = "slide-com";
    //   }
    //   if (to.meta.index > 1 && to.meta.index < from.meta.index) {
    //     //设置动画名称
    //     this.transitionName = "slide-back";
    //   }
    // },
  },
  methods: {
    // 用于显示隐藏 侧边栏的创建歌单栏的二级盗汗
    show_create() {
      this.show = !this.show;
    },

    // 用于侧边栏高亮的方法
    nav_active_all(type, index) {
      console.log(type);
      if (type === "1") {
        this.nav_active = index;
        if (
          !(
            this.my_music_nav_active === -1 &&
            this.create_my_music_ipt_active === -1
          )
        ) {
          this.my_music_nav_active = -1;
          this.create_my_music_ipt_active = -1;
        }
      } else if (type === "2") {
        this.my_music_nav_active = index;
        if (
          !(this.nav_active === -1 && this.create_my_music_ipt_active === -1)
        ) {
          this.nav_active = -1;
          this.create_my_music_ipt_active = -1;
        }
      } else if (type === "3") {
        this.create_my_music_ipt_active = index;
        if (!(this.nav_active === -1 && this.my_music_nav_active === -1)) {
          this.nav_active = -1;
          this.my_music_nav_active = -1;
        }
      }

      this.go_page(index);
    },

    // 跳转页面
    go_page(index) {
      if (index === 0) {
        this.$router.push({ name: "Find_music" });
        return;
      }
      if (index === 1) {
        this.$router.push({ name: "Video" });
        return;
      }
      if (index === 2) {
        // this.$router.push({ name: "Friends" });
        return;
      }
    },

    // 顶部导航的左右按钮
    go(a) {
      this.$router.go(a);
    },

    // 用于暂停和开始播放
    pause_or_play() {
      if (this.$store.state.audio.paused) {
        this.$store.state.audio.play();
      } else {
        this.$store.state.audio.pause();
      }
    },

    // 拖动播放器进度条修改值
    change_player_lenth(player_lenth) {
      // 获取正在播放音乐的总长度
      let music_total_time = this.$store.state.audio.duration;
      console.log(music_total_time);

      // 获取拖动后正在播放音乐的时间位置
      let current_time = (player_lenth * music_total_time) / 100;

      // 修改audio标签的播放时长
      this.$store.state.audio.currentTime = current_time;

      // 调用vuex修改
      this.$store.commit("current_time", this.init_time(current_time * 1000));
    },

    // 格式化时间
    init_time(times) {
      let t = "";
      let m =
        Math.floor(times / 1000 / 60) < 10
          ? "0" + Math.floor(times / 1000 / 60)
          : Math.floor(times / 1000 / 60);
      let s =
        Math.floor((times / 1000) % 60) < 10
          ? "0" + Math.floor((times / 1000) % 60)
          : Math.floor((times / 1000) % 60);
      t = `${m}:${s}`;
      return t;
    },

    // 上一首按钮方法
    // last_music
    next_music() {
      // 拿到vuex的播放列表
      let play_list = this.$store.state.play_list;
      // 获取正在播放列表的
      let musis_info = this.$store.state.musis_info;

      let index = "";

      // 遍历播放列表
      if (play_list.length <= 1) {
        console.log("已经是第一首歌啦");
        return;
      }
      for (let i = 0; i < play_list.length; i++) {
        if (play_list[i].id === musis_info.id) {
          index = i;
          break;
        }
      }
      if (!play_list[index + 1]) {
        console.log("已经是第一首歌啦");
        return;
      }
      this.$store.commit("musis_info", this.$store.state.play_list[index + 1]);
      this.$store.commit("src_id", this.$store.state.play_list[index + 1].id);
      this.$store.dispatch("get_src");
      console.log(this.$store.state.play_list);
    },
    // next_music
    // 下一首按钮的方法
    last_music() {
      // 拿到vuex的播放列表
      let play_list = this.$store.state.play_list;
      // 获取正在播放列表的
      let musis_info = this.$store.state.musis_info;

      let index = "";

      // 遍历播放列表
      if (play_list.length <= 1) {
        console.log("已经是最后一首歌啦, 快歌单找个吧");
        return;
      }
      for (let i = 0; i < play_list.length; i++) {
        if (play_list[i].id === musis_info.id) {
          index = i;
          break;
        }
      }
      if (!play_list[index - 1]) {
        console.log("已经是最后一首歌啦, 快歌单找个吧");
        return;
      }
      this.$store.commit("musis_info", this.$store.state.play_list[index - 1]);
      this.$store.commit("src_id", this.$store.state.play_list[index - 1].id);
      this.$store.dispatch("get_src");
      console.log(this.$store.state.play_list);
    },

    // 设置音量
    set_volume(e) {
      this.$store.state.audio.volume = e / 100;
      if (e === 0) {
        this.$store.commit("volume_icon", true);
        this.volumeImg = mute;
      } else {
        this.$store.commit("volume_icon", false);
        this.volumeImg = volume;
      }
      this.$store.commit("set_volume", e);
      console.log(this.$store.state.volume_icon);
    },

    // 显示播放列表
    show_play_list() {
      this.show_play_list_boo = !this.show_play_list_boo;
    },

    //  在play_list播放列表中中 获取需要播放音乐的id
    get_music_id(item) {
      // 将音乐的id传到vuex获取url路径
      this.$store.commit("src_id", item.id);
      // 将正要播放的音乐传都vuex
      this.$store.commit("musis_info", item);
      // 调用vuex里面的actions里面的额get_src方法 得到音乐的路径
      this.$store.dispatch("get_src");

      console.log("我是正在播放的音乐", this.$store.state.musis_info);
    },

    // 单挑删除歌曲方法
    delete_music(index) {
      // 当删除的歌曲处于播放的情况下
      if (
        this.$store.state.play_list[index].id ===
        this.$store.state.musis_info.id
      ) {
        // 当播放列表只剩下一首正在播放的歌曲 并且还要删除 直接调用pause()方法暂停并且隐藏播放器
        if (this.$store.state.play_list.length == 1) {
          this.$store.commit("play_list_delete_one", index);
          this.$store.state.audio.pause();
          return;

          // 当正在播放音乐处于列表的最后一首时
          // 并且需要删除时
          // 而且列表还存在歌曲时,
          // 则删除后直接跳转到第一首歌进行播放
        } else if (this.$store.state.play_list.length - 1 === index) {
          this.$store.state.play_list.splice(index, 1);
          this.$store.commit("src_id", this.$store.state.play_list[0].id);
          this.$store.commit("musis_info", this.$store.state.play_list[0]);
          // 进度条清零
          this.$store.commit("player_lenth", 0);
          // 播放
          this.$store.dispatch("get_src");
          return;
        }

        // 当音乐处于正在播放时,并且需要删除, 而且该歌曲上下都有音乐时, 直接删除后播放下一首
        this.$store.commit("play_list_delete_one", index);
        this.$store.commit("src_id", this.$store.state.play_list[index].id);
        this.$store.commit("musis_info", this.$store.state.play_list[index]);
        // 进度条清零
        this.$store.commit("player_lenth", 0);
        // 播放
        this.$store.dispatch("get_src");
        return;
      }

      // 当音乐不处于播放状态时,  直接删除即可
      this.$store.commit("play_list_delete_one", index);
    },

    // 清空播放列表的方法
    delete_play_list() {
      let len = this.$store.state.play_list.length;
      this.$store.commit("play_list_delete_all", len);
      this.$store.commit("src_id", "");
      this.$store.state.audio.pause();
      this.show_play_list_boo = false;
    },

    // 点击播放器中的音乐图片  跳转到歌词
    go_friends() {
      this.$router.push({ name: "Lyrics" });
    },

    // 搜索方法
    // 回车时搜索
    // 点击搜索
    search_enter_fn(keywords) {
      this.$store.commit("select_search_tab", 0);
      this.search_value = keywords || this.search_value;
      if (this.search_value.length === 0) {
        console.log("你没有输入关键字哦");
        return;
      }
      // this.$store.commit("select_searrch_tab_type",1)
      this.$store.commit("search_history_data", this.search_value);
      this.$store.commit("search_value", this.search_value);
      this.$store.commit("search_page", 1);
      this.$router.push({ name: "Search_music" });
      this.axios({
        methods: "get",
        url: "/search",
        params: {
          keywords: this.search_value,
        },
      })
        .then((res) => {
          console.log("我是回车搜索后的数据", res);
          res.data.result.songs.forEach((v) => {
            v.duration = hsm(v.duration);
            v.name1 = this.bright_search_value(v.name);
            v.album.name1 = this.bright_search_value(v.album.name);
            v.artists[0].name1 = this.bright_search_value(v.artists[0].name);
          });

          let count = `找到${res.data.result.songCount}首单曲`;

          this.$nextTick(this.$store.commit("search_data", res.data.result));
          this.$nextTick(this.$store.commit("search_data_count", count));
          this.search_box = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 判断是否存在我们要进行搜索的关键字
    bright_search_value(val) {
      let keyword = this.search_value;
      // console.log(keyword);
      if (val.indexOf(keyword) !== -1) {
        return val.replace(keyword, `<font color='#33ccff'> ${keyword}</font>`);
      } else {
        return val;
      }
    },

    // 获取光标时搜索
    search_focus_fn() {
      // 判断输入框内是否有值  有值则不显示
      if (this.search_value) {
        return;
      }
      this.search_box_now = true;
      // 获取光标后显示弹窗
      this.search_box = true;
      // 如果开光为false  则不继续往下
      if (!this.search_boo) return;
      // 如果开关为ture  则调用接口
      if (this.search_boo) {
        this.axios({
          method: "get",
          url: "/search/hot/detail",
        })
          .then((res) => {
            console.log("我是搜索热搜榜的数据", res);
            this.foucs_get_data = res.data.data;
          })
          .catch((err) => {
            console.log(err);
          });
      }
      // 调用完接口再把开光设置为fasle
      this.search_boo = false;
      // 调用定时器 5秒后把开光变成true
      this.search_timer = setInterval(() => {
        // 把开关设置为true
        this.search_boo = true;
        // 执行完后把定时器自己给清楚
        this.search_timer = null;
      }, 10000);
    },

    // 当输入框的值发生变化时触发的搜索
    search_input_change_fn() {
      if (this.search_value === "") {
        this.search_box_now = true;
        return;
      }
      this.search_box = true;
      // 是ture的话就显示 第一个搜索框 false 就显示正在搜索的框
      this.search_box_now = false;
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.$store.commit("search_value", this.search_value);
        this.axios({
          method: "get",
          url: "/search/suggest",
          params: {
            keywords: this.search_value,
          },
        })
          .then((res) => {
            console.log("我是多重搜索的res", res);
            if (!res.data.result) {
              return;
            }
            res.data.result.title = `搜"${this.bright_search_value(
              this.search_value
            )}"相关的结果`;
            // 遍历歌曲
            if (res.data.result.songs) {
              res.data.result.songs.forEach((v) => {
                v.name1 = this.bright_search_value(v.name);
                v.artists[0].name1 = this.bright_search_value(
                  v.artists[0].name
                );
              });
            }

            // 遍历专辑
            if (res.data.result.albums) {
              res.data.result.albums.forEach((v) => {
                v.name1 = this.bright_search_value(v.name);
                v.artist.name1 = this.bright_search_value(v.artist.name);
              });
            }

            if (res.data.result.artists) {
              // 遍历歌手
              res.data.result.artists.forEach((v) => {
                v.name1 = this.bright_search_value(v.name);
              });
            }

            this.inp_change_search_data = res.data.result;
          })
          .catch((err) => {
            console.log(err);
          });
      }, 500);
    },

    // 输入框失去光标时触发
    search_blur_fn() {},

    // 事件对象 不要让弹出消失
    search_box_show_fn(e) {
      // console.log(e);
      for (let i = 0; i < e.path.length; i++) {
        // console.log(e.path[i]);
        if (
          e.path[i].className === "tc_box" ||
          e.path[i].className === "inp" ||
          e.path[i].className === "tc"
        ) {
          return;
        }
      }
      this.search_box = false;
    },

    // look_all 点击弹窗查看全部搜索历史记录
    look_all_fn() {
      this.look_all = !this.look_all;
    },

    // 点击删除历史搜索记录
    delete_search_histroy_fn(index) {
      if (index) {
        this.$store.commit("search_history_data_index", index);
      } else {
        this.$store.commit("search_history_data_all", []);
      }
    },

    // 点击搜索弹窗的歌曲播放
    // 点击播放
    play_music(item) {
      this.search_box = false;
      let play_info = {
        picUrl: "",
        name: "",
        playTime: "",
        song: {
          alias: [],
          artists: [{ name: "" }],
        },
        id: "",
        type: "singer_music",
      };
      //   图片路劲
      play_info.picUrl = item.album.artist.img1v1Url;
      //   音乐名称层
      play_info.name = item.name;
      //   播放时间
      play_info.playTime = item.duration;
      //   播放时间  毫秒形式
      play_info.playTimeS = item.duration;
      //
      play_info.song.alias = item.alias;
      //   歌手名称
      play_info.song.artists[0].name = item.artists[0].name;
      //   音乐的id
      play_info.id = item.id;

      this.$store.commit("musis_info", play_info);
      this.$store.commit("play_list", play_info);
      this.$store.commit("src_id", play_info.id);
      this.$store.dispatch("get_src");

      console.log("item", item);
      console.log(this.$store.state.musis_info);
    },

    // 跳转到歌手页面
    gosingerDetails(item) {
      this.search_box = false;
      console.log(item);
      console.log("我要去歌手详情页");
      this.$store.commit("singer_info", item);
      this.$router.push({ name: "SingerDetails" });
    },

    // 点击跳转专辑详情你  Zjdetails
    // 点击专辑到专辑详情
    go_zj_details(item) {
      this.axios({
        method: "get",
        url: "/album/detail/dynamic",
        params: {
          id: item.id,
        },
      })
        .then((res) => {
          console.log(item);
          console.log(res);
          console.log(res);
          item.commentCount = res.data.commentCount;
          item.subCount = res.data.subCount;
          item.shareCount = res.data.shareCount;
          item.publishTime = ymd(item.publishTime);
          item.picUrl = item.artist.picUrl;
          let arr = [];
          arr.push(item.artist);
          item.artists = arr;
          this.$store.commit("select_acchor_data", item);

          console.log("s数据", item);

          this.get_singer_album_center_fn(item.id, item);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 获取专辑内容
    get_singer_album_center_fn(id, v) {
      this.axios({
        method: "get",
        url: "/album",
        params: {
          id: id,
        },
      })
        .then((res) => {
          console.log("我要加载多久");
          console.log(res);
          // 长度
          v.len = res.data.songs.length;
          v.all_album_music = res.data.songs;
          v.sg = "sg";

          // 遍历格式化时间
          res.data.songs.forEach((v1) => {
            v1.dt = hsm(v1.dt);
          });
          console.log(res.data.songs);
          this.$nextTick(this.$store.commit("select_acchor_data", v));
          this.$router.push({ name: "Zjdetails" });
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../assets/css/home.less");
</style> 
